<template>
  <div class="ur-card taskCard">
    <card-header :title="'运行计划'" :hasBackground="true"></card-header>
    <div class="ur-card-body" :class="{active:statisticIndex==4}">
      <el-tabs  type="border-card" style="width: 400px;" v-model="activeName"  @tab-click="handleClick">
        <el-tab-pane v-for="(item,index) in taskList" :key="item.Key" :label="item.Key" :name="item.Key">
        </el-tab-pane>
      </el-tabs>
      <div id="myChart6" class="w-100" :style="{'height':height+'px'}"  element-loading-customClass="myChart6"
           v-loading="loading" element-loading-text="拼命加载中"
           element-loading-spinner="el-icon-loading" element-loading-background="transparent"></div>
    </div>
  </div>
</template>

<script>
  import api from 'api/api'
  import cardHeader from "base/card-header"
  import chart from 'api/chart'

  export default {
    components: {cardHeader},
    props: {
      height:0,
      offTime:'',
      onTime:'',
      statisticIndex:{
        type:Number,
        default:4
      }
    },
    data() {
      return {
        taskChart:null,
        taskList:[],
        taskObject:{},
        activeName:'',
        loading:false
      }
    },
    watch: {
      statisticIndex:{
        handler(newValue, oldValue) {
          this.statisticIndex = newValue
        },
        deep: true
      }
    },
    computed: {},
    methods: {
      handleClick(tab, event) {
        let data=this.taskObject[this.activeName]
        this.taskChartData(data)
      },
      async queryTask(){//亮灯率
        // if (this.taskChart) {
        //   this.taskChart.dispose()
        // }
        let res = await api.fetchSimple('/OverView/GetTaskInfo')
        if(!res.length) return
        let list=[]
        res.map(r=>{
          if (!this.taskObject[r.Key]) {
            this.taskObject[r.Key] = r.Data
            list.push(r)
          }
        })
        this.taskList=list
        this.activeName=this.taskList[0].Key
        this.taskChartData(this.taskList[0].Data)
      },
      taskChartData(data){
        this.taskChart = chart.barChart('myChart6')
        let xData = [], yData = []
        for (let i = 0; i < data.length; i++) {
          //临时修改
          /*if(i==0){
            xData.push(this.onTime)
          }else if(i==data.length-1){
            xData.push(this.offTime)
          }else{
          }*/
          xData.push(data[i].Time)
          yData.push(data[i].Value)
        }
        let formatter = '时间：{b0}<br/>{a0}：{c0}'
        // let shadowColor = ['rgba(26,193,227,1)', 'rgba(11,141,195,0.4)']
        // chart.setLineOptionChart(this.taskChart, formatter, xData, yData, '节能模式', 'rgba(26,193,227,0.1)', shadowColor)
        this.taskChart.setOption({
          tooltip: {
            formatter: formatter
          },
          barCategoryGap:0,
          color:new echarts.graphic.LinearGradient(0, 0, 0, 1,
              [{offset: 0, color: 'rgba(26,193,227,1)'}, {offset: 1, color: 'rgba(11,141,195,0.4)'}]
          ),
          xAxis: {
            minInterval:0,
            data: xData,
            axisTick:{show:false}
          },
          series: [{
            name: '调光等级', type: 'bar', data: yData, barMinHeight: 3
          }]
        })
      }
    },
    created() {
    },
    mounted() {
      setTimeout(()=>{
        this.queryTask()
      },500)
    }
  }
</script>
<style  lang="stylus" rel="stylesheet/stylus">
  .taskCard{
    .el-tabs__content{padding:0 !important}
    .el-tabs--border-card{background-color:transparent !important;border:none;}
    .el-tabs--border-card>.el-tabs__header{background-color:transparent !important;border:none}
    .el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active{background:#4F9EB8;color:#000713 !important;border-color:#4F9EB8;padding:0 3px;}
    .el-tabs--top.el-tabs--border-card .el-tabs__item{
      &:nth-child(2){padding-left:10px !important;}
      &:last-child{padding-right:3px !important;}
    }
    .el-tabs__item{height:24px;line-height:24px;padding:0 10px;font-size:12px;color:#BFCFEF !important;}
    .el-tabs__nav-next, .el-tabs__nav-prev{line-height:26px;}
  }
</style>
